<template>
	<view class="login login-bg" @touchmove.stop.prevent="()=>{}">
		<view class="content padding">
			<!-- 头部logo -->
			<view class="header margin-bottom">
				<view class="logoname font-title">红樱桃</view>
				<view class="logotext font-sub-title">时刻关注您的健康</view>
			</view>
			<view class="login-form">
				<view class="login-group">
					<input v-model="phone" class="login-input font-normal" placeholder="手机号码" name="input"></input>
				</view>
				<view class="login-group" v-if="!loginflag">
					<input v-model="password" class="login-input font-normal" placeholder="密码" type="password"></input>
				</view>
				<view class="login-group" style="padding-right: 0;" v-else>
					<input type="number" v-model="code" class="font-normal code-input" placeholder="验证码" name="input"></input>
					<button class='cu-btn theme-blue-bg font-normal code-btn' :disabled="showcount" @tap="getCode()">{{showcount ? count + 's' : '验证码'}}</button>
				</view>
				<view class="theme-text-blue text-right font-normal" @tap="loginflag = !loginflag">{{ loginflag ? '使用密码登录' : '使用验证码登录'}}</view>
				<view class="margin-top login-item">
					<view class="margin-bottom flex justify-between align-center">
						<view>
							<button class="cu-btn login-btn font-normal" @tap="startLogin()">登 录</button>
						</view>
						<view>
							<text class="theme-text-blue font-normal" @tap="jump('/pages/login/register')">注册新用户</text>
						</view>
						<view>
							<text class="theme-text-blue font-normal" @tap="jump('/pages/login/forget')">找回密码</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer text-center font-normal">徐州市红樱桃医疗科技有限公司</view>
	</view>
</template>

<script>
	import md5 from '@/common/lib/md5.min.js'
	import checkUtil from '@/utils/checkUtil.js'
	import _config from '@/config/index.js'
	var that;
	export default {
		data() {
			return {
				phone: '', //用户/电话
				password: '', //密码
				code: '',
				showcount: uni.getStorageSync('loginShowcount') || false,
				timer: uni.getStorageSync('loginTimer') || null,
				count: uni.getStorageSync('loginCount') || '', // 倒计时
				loginflag: false, // 是否使用验证码登录
			};
		},
		onLoad(options) {
			that = this;
			//获取缓存的账号密码
			var loginInfo = uni.getStorageSync("loginInfo")
			if (loginInfo != null && loginInfo != '' && loginInfo != undefined) {
				this.phone = loginInfo.phone;
				this.password = loginInfo.password;
			}
		},
		onShow() {
			if (!this.timer) {
				this.timer = setInterval(() => {

					if (this.count > 0) {

						this.count--;
						uni.setStorageSync('loginCount', this.count);
					} else {

						this.showcount = false;
						uni.setStorageSync('loginShowcount', false)
						clearInterval(this.timer);
						uni.removeStorageSync('loginTimer')
						this.timer = null;

					}

				}, 1000)
			}
		},
		methods: {
			jump(path) {
				uni.navigateTo({
					url: path
				})
			},
			getCode() {
				if (this.phone == '') {
					uni.showToast({
						"title": "请输入手机号",
						"position": "bottom",
						"icon": "none"
					})
					return;
				}
				if (!checkUtil.checkPhone(this.phone)) {
					uni.showToast({
						"title": "请输入正确的手机号",
						"position": "bottom",
						"icon": "none"
					})
					return;
				}
				if (this.showcount) {
					return;
				}
				const TIME_COUNT = 60;
				uni.showLoading({
					"title": "验证码发送中..."
				})
				this.$http.getSMSCode({
					phone: that.phone
				}).then((res) => {
					if (res.code == 1) {
						uni.hideLoading()
						uni.showToast({
							title: "验证码发送成功",
							position: "bottom",
							icon: "none"
						})
						if (!this.timer) {

							this.count = TIME_COUNT;

							this.showcount = true;
							uni.setStorageSync('loginShowcount', true)
							this.timer = setInterval(() => {

								if (this.count > 0 && this.count <= TIME_COUNT) {

									this.count--;
									uni.setStorageSync('loginCount', this.count);
								} else {

									this.showcount = false;
									uni.setStorageSync('loginShowcount', false)
									clearInterval(this.timer);
									uni.removeStorageSync('loginTimer')
									this.timer = null;

								}

							}, 1000)

						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							position: "bottom",
							icon: "none"
						})
					}
				})
			},
			login(params) {
				if (params) {
					this.$store.dispatch('login', params).then(res => {
						uni.hideLoading()
						var phone = that.phone
						if (res.code === 1) {
							if (res.result.LOGIN_ROLE == '2') { 
								phone = phone + 'med'
							}
							var password 
							if(that.loginflag){
								password = res.result.RANDOM_STR
							}else{
							    password	= md5(that.password)
							}
							uni.request({
								url: _config.serverUrl + '/u/registOrLogin',
								method: 'POST',
								data: {
									username: phone,
									password:password ,
									cid: uni.getStorageSync("cid")
								},
								dataType: "json",
								success(result) {
									if (result.data.status == 200) {
										uni.setStorageSync("userId", result.data.data.id);
										uni.showToast({
											icon: 'success',
											title: '登录成功 '
										});
										that.$store.dispatch('WEBSOCKET_INIT');
										if (that.loginflag) {
											that.password = res.result.RANDOM_STR
											uni.setStorageSync("autoInfo", {
												"phone": that.phone,
												"password": that.password,
												"loginType": "1"
											})
										} else {
											uni.setStorageSync("autoInfo", {
												"phone": that.phone,
												"password": md5(that.password),
												"loginType": "1"
											})
										}
										uni.setStorageSync("loginInfo", {
											"phone": that.phone,
											"password": that.password,
											"loginType": "1"
										});
										if (res.result.LOGIN_ROLE == 1) {
											uni.setStorageSync("role", 'user')
										} else {
											uni.setStorageSync("role", 'medicalstaff')
										}
										uni.setStorageSync("token", res.result.token)
										uni.reLaunch({
											url: '/pages/index/index',
										})
									} else {
										uni.showToast({
											"title": "用户名或密码错误",
											"position": "bottom",
											"icon": "none"
										})
									}
								},
								fail(res) {
									uni.showToast({
										icon: 'none',
										position: 'bottom',
										title: "登录失败，请重试"
									});
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.message
							});
						}
					}).catch(() => {})
				}
			},
			startLogin() {
				if (this.phone == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请输入手机号'
					});
					return;
				}
				if (!this.loginflag) {
					if (this.password == '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '密码不能为空'
						});
						return;
					}
				}
				if (this.code.length != 4 && this.loginflag) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请输入4位验证码'
					});
					return;
				}
				uni.showLoading({
					"title": "登录中..."
				})
				// 网络请求
				const params = {
					phone: this.phone,
				}
				if (!this.loginflag) {
					params.loginType = "1"
					params.password = md5(this.password)
				} else {
					params.loginType = "2"
					params.code = this.code
				}
				this.login(params)
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.cu-form-group {
		border: 0.5px solid #ddd;
		margin-bottom: 45rpx;
		min-height: 70rpx;
		padding-right: 0;
	}

	uni-button[disabled]:not([type]) {
		color: #fff !important;
	}

	.login-bg {
		height: 100%;
		padding-top: 200rpx;
	}

	.theme-text-blue {
		color: #427EE3;
	}

	.theme-blue-bg {
		background-color: #427EE3 !important;
		color: #fff;
		border-radius: 0;
	}

	.logoname {
		font-weight: 800;
		color: #427EE3;
	}

	.logotext {
		font-weight: 800;
		position: relative;
		left: 180rpx;
	}

	.login-btn {
		border-radius: 0;
		background-color: #427EE3 !important;
		color: #fff;
		padding: 0 64rpx;
		height: 80rpx;
		width: 220rpx;
	}

	.login-bg .content .header {
		width: 100%;
		margin-bottom: 80rpx;
		padding-left: 160rpx;
	}

	.login-item {
		margin-top: 80rpx;
	}

	.code-input {
		width: 350rpx;
	}

	.footer {
		text-align: center;
		width: 600rpx;
		bottom: 15rpx;
		position: fixed;
		left: 75rpx;
	}

	.code-btn {
		width: 220rpx !important;
		height: 80rpx !important;
	}

	.login-input {
		width: 560rpx;
	}

	.login-group {
		margin: 0 auto;
		background-color: #ffffff;
		padding: 1px 14px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		min-height: 48px;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		border: 0.5px solid #ddd;
		margin-bottom: 30px;
		min-height: 33px;
		width: 600rpx;
		height: 80rpx;
	}

	.login-form {
		width: 600rpx;
		margin: 0 auto;
	}
</style>
